<template>
	<div class="main_container" style="width: 100%">
		<el-header style="text-align: right; font-size: 12px">
			<div class="pageHeader_container">
				<el-page-header @onclick="goBack" content="成药处方"></el-page-header>
			</div>
		</el-header>
		<el-main>
			<div class="main_container">
				<el-card class="box-card">
					<!--搜索与添加区域-->
					<el-row :gutter="20">
						<el-col :span="8">
							<el-input placeholder="请输入内容" v-model="user.id" clearable @clear="getList">
								<el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
							</el-input>
						</el-col>
						<el-col :span="2">
							<el-button type="infor" icon="el-icon-circle-plus-outline" @click="addDialogVisible=true">增方</el-button>
						</el-col>
						<el-col :span="4">
							<el-button type="infor" icon="el-icon-view" @click="view()">查看处方表</el-button>
						</el-col>
					</el-row>
					<!--用户列表区-->
					<el-table height="700" :data="list" border stripe weight>
						<el-table-column type="index"></el-table-column>
						<el-table-column label="ID" prop="id"></el-table-column>
						<el-table-column label="成药处方ID" prop="prescriptionID"></el-table-column>
						<el-table-column label="药品	ID" prop="drugsID"></el-table-column>
						<el-table-column label="用法" prop="drugsUsage"></el-table-column>
						<el-table-column label="用量" prop="dosage"></el-table-column>
						<el-table-column label="频次" prop="frequency"></el-table-column>
						<el-table-column label="数量" prop="amount"></el-table-column>
						<el-table-column label="状态" prop="state">
							<template slot-scope="scope">
								<!-- <el-tag v-if="scope.row.state===1">暂存</el-tag>	
							<el-tag v-else-if="scope.row.state===2">开立</el-tag> -->
								<el-tag v-if="scope.row.state===2" type="success">开立</el-tag>
								<el-tag v-else-if="scope.row.state===3" type="info">已交费</el-tag>
								<el-tag v-else-if="scope.row.state===4">已发药</el-tag>
								<el-tag v-else-if="scope.row.state===5" type="warning">已退药</el-tag>
								<el-tag v-else type="danger">已退费</el-tag>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
				<!--增方区域-->
				<el-dialog title="增方" :visible.sync="addDialogVisible" width="50%" @close="addclose">
					<!--内容主体区-->
					<el-form :model="adddrug" ref="addruleForm" label-width="100px">
						<el-form-item label="处方名称" prop="prescriptionName">
							<el-input v-model="adddrug.prescriptionName"></el-input>
						</el-form-item>						
					</el-form>

					<!--底部区-->
					<span slot="footer" class="dialog-footer">
						<el-button @click="addDialogVisible = false">关闭</el-button>
						<el-button type="primary" @click="searchprescription()">确定</el-button>
					</span>
				</el-dialog>

				<el-dialog title="处方列表" :visible.sync="adddrugDialogVisible" width="50%">
					<!--内容主体区-->
					<el-table height="300" :data="adddrugList" border stripe weight>
						<el-table-column type="index"></el-table-column>
						<el-table-column label="成药处方ID" prop="id"></el-table-column>
						<el-table-column label="数量" prop="amount"></el-table-column>
						<el-table-column label="药品ID" prop="drugsUsage"></el-table-column>
						<el-table-column label="用法" prop="drugsID"></el-table-column>
						<el-table-column label="用量" prop="dosage"></el-table-column>
						<el-table-column label="频次" prop="frequency"></el-table-column>
						<el-table-column label="处方状态" prop="state">
							<template slot-scope="scope">
								<el-tag type="warning" v-if="scope.row.state===2">已开立</el-tag>
								<el-tag type="success" v-else-if="scope.row.state===3">已交费</el-tag>
								<el-tag type="success" v-else-if="scope.row.state===4">已发药</el-tag>
								<el-tag type="danger" v-else-if="scope.row.state===5">已退药</el-tag>
								<el-tag type="danger" v-else>已退费</el-tag>
								<el-tag type="info" v-else>作废</el-tag>
							</template>
						</el-table-column>
		
					</el-table>

					<!-- 底部区-->
					<span slot="footer" class="dialog-footer">
						<el-button icon="el-icon-refresh" @click="searchprescription()">刷新</el-button>	
						<el-button icon="el-icon-insert" @click="adddrugendDialogVisible=true">增药</el-button>
						<el-button @click="adddrugDialogVisible = false">取 消</el-button>
					</span>
				</el-dialog>
				
				
				<!-- 增药信息填入的弹窗 -->
				<el-dialog title="修改" :visible.sync="adddrugendDialogVisible" width="50%">
					<!--内容主体区-->
					<el-form :model="doadder" label-width="100px">
						<el-form-item label="成药处方ID" prop="prescriptionID">
							<el-input v-model="doadder.prescriptionID"></el-input>
						</el-form-item>
						<el-form-item label="药品 ID" prop="drugsID">
							<el-input v-model="doadder.drugsID"></el-input>
						</el-form-item>
						<el-form-item label="用法" prop="drugsUsage">
							<el-input v-model="doadder.drugsUsage"></el-input>
						</el-form-item>
						<el-form-item label="用量" prop="dosage">
							<el-input v-model="doadder.dosage"></el-input>
						</el-form-item>
						<el-form-item label="频次" prop="frequency">
							<el-input v-model="doadder.frequency"></el-input>
						</el-form-item>
						<el-form-item label="数量" prop="amount">
							<el-input v-model="doadder.amount"></el-input>
						</el-form-item>
						<el-form-item label="状态" prop="state">
							<el-radio-group v-model="doadder.state">
								<el-radio :label="2">已开立</el-radio>
								<el-radio :label="3">已交费</el-radio>
								<el-radio :label="4">已发药</el-radio>
								<el-radio :label="5">已退药</el-radio>
								<el-radio :label="6">已退费</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
				
					<!--底部区-->
					<span slot="footer" class="dialog-footer">
						<el-button @click="adddrugendDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="adddrugend(doadder)">确定</el-button>
					</span>
				</el-dialog>







				<el-dialog title="处方表" :visible.sync="viewDialogVisible" width="80%">
					<!-- 内容主体区 -->
					<el-table height="700" :data="plist" border stripe weight>
						<el-table-column type="index"></el-table-column>
						<el-table-column label="ID" prop="id"></el-table-column>
						<el-table-column label="病例ID" prop="medicalID"></el-table-column>
						<el-table-column label="挂号ID" prop="registID"></el-table-column>
						<el-table-column label="开立医生ID" prop="userID"></el-table-column>
						<el-table-column label="处方名称" prop="prescriptionName"></el-table-column>
						<el-table-column label="处方状态" prop="prescriptionState">
							<template slot-scope="scope">
								<el-tag type="warning" v-if="scope.row.prescriptionState===1">暂存</el-tag>
								<el-tag type="success" v-else-if="scope.row.prescriptionState===2">已开立</el-tag>
								<el-tag type="info" v-else>作废</el-tag>
							</template>
						</el-table-column>

						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" content="修改" placement="top" :enterable="false">
									<el-button icon="el-icon-edit" size="mini" @click="doupdatefirst(scope.row.id)">修改</el-button>
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
									<el-button icon="el-icon-delete" size="mini" @click="dodeleteP(scope.row.id)">删除</el-button>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<!--底部区-->
					<span slot="footer" class="dialog-footer">
						<el-button icon="el-icon-refresh" @click="doreload()">刷新</el-button>
						<el-button @click="viewDialogVisible = false">关闭</el-button>
					</span>
				</el-dialog>

				<el-dialog title="修改" :visible.sync="doupdateDialogVisible" width="50%">
					<!--内容主体区-->
					<el-form :model="doupdater" label-width="100px">
						<el-form-item label="ID" prop="medicalID">
							<el-input v-model="doupdater.id" disabled=""></el-input>
						</el-form-item>
						<el-form-item label="病例ID" prop="medicalID">
							<el-input v-model="doupdater.medicalID"></el-input>
						</el-form-item>
						<el-form-item label="挂号ID" prop="registID">
							<el-input v-model="doupdater.registID"></el-input>
						</el-form-item>
						<el-form-item label="开立医生ID" prop="userID">
							<el-input v-model="doupdater.userID"></el-input>
						</el-form-item>
						<el-form-item label="处方名称" prop="prescriptionName">
							<el-input v-model="doupdater.prescriptionName"></el-input>
						</el-form-item>
						<el-form-item label="处方状态" prop="prescriptionState">
							<el-radio-group v-model="doupdater.prescriptionState">
								<el-radio :label="1">暂存</el-radio>
								<el-radio :label="2">已开立</el-radio>
								<el-radio :label="0">作废</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>

					<!--底部区-->
					<span slot="footer" class="dialog-footer">
						<el-button @click="doupdateDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="doupdate(doupdater)">确定</el-button>
					</span>
				</el-dialog>
			</div>
		</el-main>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					id: '',
					medicalID: '',
					registID: '',
					userID: '',
					prescriptionName: '',
					prescriptionState: '',
				},
				list: [],
				plist: [],
				viewForm: [],
				doupdater: {
					id: '',
					medicalID: '',
					registID: '',
					userID: '',
					prescriptionName: '',
					prescriptionState: '',
				},
				doadder:{
					prescriptionID:'',
					drugsID:'',
					drugsUsage:'',
					dosage:'',
					frequency:'',
					amount:'',
					state:''
				},

				addDialogVisible: false,
				updateDialogVisible: false,
				viewDialogVisible: false,
				doupdateDialogVisible: false,
				adddrugDialogVisible: false,
				adddrugendDialogVisible:false,
				adddrug: {
					id: '',
					medicalID: '',
					registID: '',
					userID: '',
					prescriptionName: '',
					prescriptionState: '',
				},
				addruleForm: {
					//id:'',
					medicalID: '',
					registID: '',
					userID: '',
					prescriptionName: '',
					prescriptionState: ''
				},

				adddrugList: [],
				//保存需要修改的对象信息，以便在修改界面进行展示
				updateForm: {},
				gettable: {}
			}

		},
		created() {
			this.getList()
		},
		methods: {
			goBack() {
				alert('go back');
			},
			async dodeleteP(id) {
				const confirmResult = await this.$confirm('是否作废?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.catch(err => err)
				if (confirmResult != 'confirm') {
					return this.$message.info("已取消")
				}
				let url = 'http://localhost:8888/Prescription/delete';
				this.$axios.get(url + '?' + 'id=' + id)
					.then((resp) => {
						let i = resp.data;
						if (i > 0) {
							alert("删除成功")
							// window.location.reload()
							// this.$router.push('/home/outpatient/patientcosts')
						} else {
							alert("已开立状态无法删除！")
						}
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			getList() {
				let url = 'http://localhost:8888/Prescriptiondetailed/selectAll';
				let param = this.$qs.stringify(this.user);
				this.$axios.post(url, param)
					.then((resp) => {
						this.list = resp.data;
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			getListPrescription() {
				let url = 'http://localhost:8888/Prescription/selectAll';
				let param = this.$qs.stringify(this.user);
				this.$axios.post(url, param)
					.then((resp) => {
						this.plist = resp.data;
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			doreload() {
				this.view();
			},

			

			searchprescription() {
				let url = "http://localhost:8888/Prescription/selectByName";
				let param = this.$qs.stringify(this.adddrug);
				this.$axios
					.post(url, param)
					.then((resp) => {
						this.adddrugList = resp.data;
					})
					.catch((err) => {
						console.log("error=", err);
					});
				this.adddrugDialogVisible = true;
			},
			
			addclose() {
				this.$refs.addruleForm.resetFields()
			},
			updateclose() {
				this.$refs.updateRef.resetFields;
			},
			updateprescription() {
				let url = 'http://localhost:8888/Prescription/update';
				//this.user.act='update';
				let param = this.$qs.stringify(this.updateForm);
				this.$axios.post(url, param)
					.then((resp) => {
						let i = resp.data;
						if (i > 0) {
							alert("修改成功")
							// this.$router.push('/home/outpatient/patientcosts')
						} else {
							this.msg = '修改失败，请处理'
						}
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			//修改
			doupdate(doupdater) {
				let url = 'http://localhost:8888/Prescription/update';
				let param = this.$qs.stringify(this.doupdater);
				this.$axios.post(url,param)
					.then((resp) => {
						let i = resp.data;
						if (i > 0) {
							alert("修改成功");
							this.doupdateDialogVisible = false;
						}else {
							alert("失败请处理！")
						}
						
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			adddrugend(doadder){
				this.adddrugendDialogVisible = true;
				let url = 'http://localhost:8888/Prescriptiondetailed/add';
								let param = this.$qs.stringify(this.doadder);
								this.$axios.post(url, param)
								    .then((resp) => {
								    	let i = resp.data;
								    	if (i > 0) {
								    		alert("增加成功")
											this.adddrugendDialogVisible = false
								    	} else {
								    		this.msg = '增加失败，请处理'
								    		// this.$router.push('/home/outpatient/checkapply')
								    	}
								    })
								    .catch((err) => {
								    	console.log('error=', err);
								    })
			},
			getid(id) {
				let url = 'http://localhost:8888/Prescription/selectById';
				//let param=this.$qs.stringify(id);
				this.$axios.get(url + '?' + 'id=' + id)
					.then((resp) => {
						this.updateForm = resp.data;
					})
					.catch((err) => {
						console.log('error=', err);
					})
				this.updateDialogVisible = true;
			},

			//删除
			async dodelete(id) {
				const confirmResult = await this.$confirm('是否作废?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.catch(err => err)
				if (confirmResult != 'confirm') {
					return this.$message.info("已取消")
				}
				let url = 'http://localhost:8888/Prescriptiondetailed/delete';
				this.$axios.get(url + '?' + 'id=' + id)
					.then((resp) => {
						let i = resp.data;
						if (i > 0) {
							alert("删除成功")
							window.location.reload()
							// this.$router.push('/home/outpatient/patientcosts')
						} else {
							alert("非暂存状态无法删除！")
						}
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			view() {
				this.getListPrescription();
				this.viewDialogVisible = true;

			},
			doupdatefirst(id) {

				let url = 'http://localhost:8888/Prescription/selectById';
				this.$axios.get(url + '?' + 'id=' + id)
					.then((resp) => {
						this.doupdater = resp.data;
						if (this.doupdater.prescriptionState == 1) {
							this.doupdateDialogVisible = true;
						} else {
							alert("非暂存状态无法修改！")
						}
					})
					.catch((err) => {
						console.log('error=', err);
					})
			}
		}
	}
</script>

<style scoped>
	.box-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !;
	}
</style>
